/*
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-06-06 23:09:24
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-09-11 16:06:46
 * @FilePath: /tspods/plugins/postcss-apply-tailwind.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// postcss-apply-tailwind.ts 实现组合多个实用程序类
import postcss from 'postcss';
// import tailwindConfig from 'tailwindcss/defaultConfig'; // 引入 Tailwind CSS 默认配置

// const tailwindUtilities = tailwindConfig.theme.extend?.utilities ?? tailwindConfig.theme.utilities;

// // 插件工厂函数
// function createPlugin() {
//   return (root, result) => {
//     // 在这里编写你的转换逻辑
//     // root 是 PostCSS AST（抽象语法树）的根节点
//     // result 是一个对象，包含有关转换过程的信息
//     root.walkRules((rule) => {
//       if (rule.selector) {
//         rule.walkDecls((decl) => {
//           if (decl.prop === '--at-apply') {
//             const tailwindClasses = decl.value.split(/\s+/).map((className) => {
//               console.log("css类："+className)
//               // 检查 Tailwind CSS 是否有这个类
//               if (tailwindUtilities[className]) {
//                 return `.${className}`;
//               }
//               return `.${className}`;
//               // 如果找不到类，可以抛出错误或记录警告
//               console.warn(`Tailwind CSS class ${className} not found.`);
//               return '';
//             });
//           console.log("<<<<<<<<<");
//           console.log(tailwindClasses)
//             // 替换为 Tailwind CSS 类
//             rule.append(...tailwindClasses.filter(Boolean).map((className) => ({
//               prop: null,
//               value: className,
//               raws: { before: '' }, // 确保选择器之间没有空格
//             })))
//             // 移除自定义属性
//             decl.remove()
//           }
//         });
//       }
//     });
//   };
// }

// const postcssApplyTailwindPlugin = postcss.plugin('postcss-apply-tailwind', createPlugin); 

// export default defineNuxtPlugin((nuxtApp) => {
//   nuxtApp.vueApp.use(postcssApplyTailwindPlugin);
// });



// 假设有一个 CSS 字符串
const css = `
  body {
    color: red;
  }
`;

// postcss([postcssApplyTailwindPlugin]).process(css, { from: 'src/app.css', to: 'dest/app.css' })

// 使用 PostCSS 和插件实例处理 CSS
postcss([postcssApplyTailwindPlugin])
  .process(css, { from: 'src/app.css', to: 'dest/app.css' })
  .then(result => {
    console.log(result.css);
  })
  .catch(error => {
    console.error(error);
  });